import React  from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, NavLink} from 'react-router-dom';
import { Icon ,Grid} from 'weaver-mobile';

@inject('infoStore')
@withRouter
@observer
/*
 * @info: 详情头部导航组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 20-03-2019 05:58:54
 */
export default class InfoHeaderUi extends React.Component {
  constructor(props) {
    super(props);
    this.state = {id: ''};
  }
  componentWillMount(){
  }
  componentDidMount() {
    const {location:{search}} = this.props;
    this.setState({
      id: new URLSearchParams(search).get('id')
    });
  }
  componentWillUnmount(){
    // const {infoStore:{clearState}} = this.props;
    // clearState();
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.location.search !== this.props.location.search){//19.1.23解决任务阶段路由任务内容，再点击任务内容，不刷新
      const {location:{search}} = nextProps;
      this.setState({
        id: new URLSearchParams(search).get('id')
      });
    }
  }
  render() {
    const {infoStore:{gridData}} = this.props;
    return(
      <div className="g-primaryHeader" style={{width:'100%', height:'90px'}}>
        <Grid data={gridData}
          columnNum={5}
          renderItem={(dataItem,index) => this.renderfun(dataItem,index)}
          hasLine={false}
        />
      </div>
    );
  }
  renderfun(dataItem,index){
    let {infoStore:{renderDom},match} = this.props;
    const setPath = (path)=>{//有两处用到，可以优化
      const index = path.lastIndexOf('/');
      const newPath = path.slice(0,index+1);
      return newPath;
    }
    renderDom = renderDom.map((obj,i)=>(
      <div className="gc-grid-container" key={i}>
        <NavLink to={`${setPath(match.url)}${obj.renderKey}?id=${this.state.id}`} exact className="gc-grid-a-default" >
          <div style={{ backgroundColor:`${obj.color}`}} className="gc-grid-icon">
            <Icon type={dataItem} color={'#fff'}/>
          </div>
          <div className="gc-grid-text">
          <span>{obj.text}</span>
          </div>
        </NavLink>
      </div>
    ));
    return renderDom[index]
  }
}
